<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>列表页面</title>
  <link rel="stylesheet" href="../lib/pagination/pagination.css">
  <link rel="stylesheet" href="../css/list.css">
</head>
<body>

  <button class="sort">排序</button>

  <div class="goodsList">
    <ul>
      <li>
        <p>名称</p>
        <p>旭号</p>
      </li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
    </ul>
  </div>

  <div class="pagi m-style"></div>

  <script src="../lib/jquery/dist/jquery.min.js"></script>
  <script src="../lib/pagination/pagination.js"></script>
  <script>
    // 2-1. 准备一个变量
    var flag = true

    // 2-2. 准备一个变量接收数组
    var list2 = []
    // 1. 请求数据
    getList()
    function getList() {
      $.ajax({
        url: '../lib/nav_top.json',
        dataType: 'json',
        success: function (res) {
          // 一页显示多少条(假定一页显示 12 条), 一共 9 页

          // 2. 渲染分页器
          $('.pagi').pagination({
            pageCount: Math.ceil(res.length / 12), // 总页数
            current: 1, // 当前页
            jump: true,
            coping: true,
            homePage: '首页', // 首页按钮的文本
            endPage: '末页', // 末页按钮的文本
            prevContent: '上页',
            nextContent: '下页',
            callback: function (api) { // 当你切换页面的时候会触发
              // api.getCurrent() 获取当前是第几页
              // console.log(api.getCurrent())
              let curr = api.getCurrent()

              // console.log(curr)
              // 根据是第几页, 从我的总数组里面筛选出一部分数据
              //   slice 方法包前不包后
              var list = res.slice((curr - 1) * 12, curr * 12)

              // 3-2. 每次使用分页器切换的时候渲染一次
              bindHtml(list)
            }
          })

          // 3. 先把第一页的数据渲染一次
          bindHtml(res.slice(0, 12))

          // 2-2. 给全局变量赋值
          list2 = res
       // console.log(list2)
        }
      })
    }
    
    function bindHtml(list) {
      //console.log(list)
      // 根据 list 数组渲染页面就可以了

      let str = ''

      list.forEach(item => {
        str += `
          <li data_id="${ item.list_id }">
            <img src="${ item.list_url }" alt=""> 
            <p class="p1">${ item.list_name }</p>
            <p class="p1">${ item.list_id }</p>
          </li>
        `
      })
      $('.goodsList > ul').html(str)
    }


    // 2. 排序
    var btn = document.querySelector('.sort')
    btn.onclick = function () {
      // 让准备好的变量改变
      flag = !flag

      // 不管是什么都要把数组重组
      list2.sort(function (a, b) {
        if (flag === true) {
          return a.id - b.id
        } else {
          return b.id - a.id
        }
      })

      

      $('.pagi').pagination({
        pageCount: Math.ceil(list2.length / 12), // 总页数
        current: 1, // 当前页
        jump: true,
        coping: true,
        homePage: '首页', // 首页按钮的文本
        endPage: '末页', // 末页按钮的文本
        prevContent: '上页',
        nextContent: '下页',
        callback: function (api) { // 当你切换页面的时候会触发
          let curr = api.getCurrent()
          // console.log(curr)
          var list = list2.slice((curr - 1) * 12, curr * 12)
          // 3-2. 每次使用分页器切换的时候渲染一次
          bindHtml(list)
         
        }
      })
      
      // 3. 先把第一页的数据渲染一次
      bindHtml(list2.slice(0, 12))
      
    }
    

    // 3. 事件委托绑定一个事件
    $('.goodsList > ul').on('click', 'li', function (e) {
     //获取数据
      const id = e.currentTarget.getAttribute('data_id')
    
    //  const id = $(this).data('list_id')
      let data = {}
     // console.log(id)
     //console.log(list2)
     for (let i = 0; i < list2.length; i++) {
        if (list2[i].list_id == id) { 
          data = list2[i] 
          break
        }
     }
       
      //4. 要把这一条数据拿到 detail.html 页面去渲染一下
    localStorage.setItem('goodsInfo', JSON.stringify(data))

    //   //存储好了以后就跳转页面
      window.location.href = './detail.html'
    })
  </script>
</body>
</html>
